// out: ../
@primary-color: #FF4400;
@shadow-color: 1px 1px 5px #d9d9d9;

@normal-action: .5s;
@special-action: .2s;

@mode-dark-bg: #000;
@mode-light-bg: #fff;
@mode-dark-text: #fff;
@mode-light-text: #000;
@mode-dark-border: #000;
@mode-light-border: #fff;

@small-font-size: 12px;
@normal-font-size: 14px;
@large-font-size: 16px;
@text-normal-color: #333;
@text-secondary-color: #666;
@text-disabled-color: #999;
@text-placeholder-color: #ccc;

@normal-padding: 10px;
@normal-margin: 10px;

@border-radius: 5px;

:root {
  --primary-color: @primary-color;
  --shadow-color: @shadow-color;
  --normal-action: @normal-action;
  --special-action: @special-action;
  --mode-bg: @mode-light-bg;
  --mode-text: @mode-light-text;
}

.dark {
  --primary-color: @primary-color;
  --shadow-color: @shadow-color;
  --normal-action: @normal-action;
  --special-action: @special-action;
  --mode-bg: @mode-dark-bg;
  --mode-text: @mode-dark-text;
}

.flex-row{
  display: flex;
}

.card {
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--text-normal-color);
  background-color: var(--bg-primary-color);
  transition: var(--tran-01);
  box-shadow: 0 2px 12px 0px rgba(0, 0, 0, .1);
}

.flex-col-1{
  max-width: calc(4.16667 * 1%);
  flex: 0 0 calc(4.16667 * 1%);
}
.flex-col-2{
  max-width: calc(4.16667 * 2%);
  flex: 0 0 calc(4.16667 * 2%);
}
.flex-col-3{
  max-width: calc(4.16667 * 3%);
  flex: 0 0 calc(4.16667 * 3%);
}
.flex-col-4{
  max-width: calc(4.16667 * 4%);
  flex: 0 0 calc(4.16667 * 4%);
}
.flex-col-5{
  max-width: calc(4.16667 * 5%);
  flex: 0 0 calc(4.16667 * 5%);
}
.flex-col-6{
  max-width: calc(4.16667 * 6%);
  flex: 0 0 calc(4.16667 * 6%);
}
.flex-col-7{
  max-width: calc(4.16667 * 7%);
  flex: 0 0 calc(4.16667 * 7%);
}
.flex-col-8{
  max-width: calc(4.16667 * 8%);
  flex: 0 0 calc(4.16667 * 8%);
}
.flex-col-9{
  max-width: calc(4.16667 * 9%);
  flex: 0 0 calc(4.16667 * 9%);
}
.flex-col-10{
  max-width: calc(4.16667 * 10%);
  flex: 0 0 calc(4.16667 * 10%);
}
.flex-col-11{
  max-width: calc(4.16667 * 11%);
  flex: 0 0 calc(4.16667 * 11%);
}
.flex-col-12{
  max-width: calc(4.16667 * 12%);
  flex: 0 0 calc(4.16667 * 12%);
}
.flex-col-13{
  max-width: calc(4.16667 * 13%);
  flex: 0 0 calc(4.16667 * 13%);
}
.flex-col-14{
  max-width: calc(4.16667 * 14%);
  flex: 0 0 calc(4.16667 * 14%);
}
.flex-col-15{
  max-width: calc(4.16667 * 15%);
  flex: 0 0 calc(4.16667 * 15%);
}
.flex-col-16{
  max-width: calc(4.16667 * 16%);
  flex: 0 0 calc(4.16667 * 16%);
}
.flex-col-17{
  max-width: calc(4.16667 * 17%);
  flex: 0 0 calc(4.16667 * 17%);
}
.flex-col-18{
  max-width: calc(4.16667 * 18%);
  flex: 0 0 calc(4.16667 * 18%);
}
.flex-col-19{
  max-width: calc(4.16667 * 19%);
  flex: 0 0 calc(4.16667 * 19%);
}
.flex-col-20{
  max-width: calc(4.16667 * 20%);
  flex: 0 0 calc(4.16667 * 20%);
}
.flex-col-21{
  max-width: calc(4.16667 * 21%);
  flex: 0 0 calc(4.16667 * 21%);
}
.flex-col-22{
  max-width: calc(4.16667 * 22%);
  flex: 0 0 calc(4.16667 * 22%);
}
.flex-col-23{
  max-width: calc(4.16667 * 23%);
  flex: 0 0 calc(4.16667 * 23%);
}
.flex-col-24{
  max-width: calc(4.16667 * 24%);
  flex: 0 0 calc(4.16667 * 24%);
}

// 小屏幕 大于 768px
@media screen and (min-width: 768px) {
}

// 中等屏幕 992px - 1200px
@media screen and (min-width: 992px) {
  .login.container {
    background: url('../assets/pre.jpg') no-repeat !important;
    background-size: cover !important;
  }
}

// 大屏幕 大于 1200px
@media screen and (min-width: 1200px) {
  .login.container {
    background: url('../assets/bg.gif') no-repeat !important;
    background-size: cover !important;
  }
}
